<template>
    <div class="main-wrapper clearfix">
        <!--左侧导航栏-->
        <ul class="main-nav clearfix">
            <router-link to="/userspace/personal">
                <span>我的首页</span>
                <i class="iconfont icon-jiantou"></i>
            </router-link>
            <a>
                <span>我的消息</span>
                <i class="iconfont icon-jiantou"></i>
            </a>
            <a>
                <span>我的交易</span>
                <i class="iconfont icon-jiantou"></i>
            </a>
            <a>
                <span>我的小圈</span>
                <i class="iconfont icon-jiantou"></i>
            </a>
            <router-link to="/userspace/mypublic">
                <span>我发布的</span>
                <i class="iconfont icon-jiantou"></i>
            </router-link>
            <router-link to="/userspace/mytrade">
                <span>我的订单</span>
                <i class="iconfont icon-jiantou"></i>
            </router-link>
            <a>
                <span>关注商品</span>
                <i class="iconfont icon-jiantou"></i>
            </a>
            <a>
                <span>我的好友</span>
                <i class="iconfont icon-jiantou"></i>
            </a>
            <a>
                <span>购买咨询</span>
                <i class="iconfont icon-jiantou"></i>
            </a>
            <a>
                <span>交易纠纷</span>
                <i class="iconfont icon-jiantou"></i>
            </a>
            <router-link to="/userspace/settings">
                <span>账号设置</span>
                <i class="iconfont icon-jiantou"></i>
            </router-link >
        </ul>

        <!--个人首页中不同的分支的独有内容都在此处main类组件中-->
        <router-view></router-view>
    </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
a {
    text-decoration: none;
    color: #333333;
    user-select: none;
}
/*设置小箭头的左外边距*/
.icon-xialajiantouxiao {
    margin-left: 10px;
}
.main-wrapper {
    width: 1200px;
    margin: 0 auto ;
    padding-bottom: 200px;
}

/*设置主题的导航栏样式*/
.main-nav {
    float: left;
    width: 150px;
    background-color: white;
    font-size: 14px;
}

/*设置主题导航栏下条目的样式*/
.main-nav a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    user-select: none;

    i {
        margin-left: 30px;
    }
}

/*设置当前页面所属标签的样式*/
.main-nav {
    .router-link-active {
        background-color: rgb(91, 81, 69);
        color: white;
    }

    a:hover {
        background-color: rgb(91, 81, 69);
        color: white;
    }
}
</style>